import React from 'react' 
//因为react不是一体化成型的需要再嵌套深的组件中引用withRouter才能 去push跳转等路由方法

import { withRouter } from 'react-router'

import {Image,Typography} from 'antd'

// 用函数组件来承载图片的 大小显示  做个判断
export const Proimg2 = ({id,size,imgsrc,price,title,history,location,match})=>  {
     return (
        //  这里就是每一项的图片 
        // <div onClick={()=>history.push('Login',{a:1})}>
      <div onClick={()=>history.push(`detail/${id}`)}>  
        {/*  这是 query传参 写法   <div onClick={()=>history.push(`detail/?name=zs&password=123456`)}> */}
            {
                size == 'large' ? (
                    <Image src={imgsrc} height={285} width={490}/>
                ) :(
                    <Image src={imgsrc} height={120} width={240}/>
                )
            }

            <div>
                <Typography.Text type='secondary'>
                        {title.slice(0,22)}
                </Typography.Text>
                <Typography.Text type='danger'>
                      ￥ {price} 起
                </Typography.Text>
            </div>
        </div>
     )
}

// 用withRouter把  Proimg2感染  才能用全局路由的一些方法
// 高阶组件写法 为了解决react中路由穿透问题
// withRouter代表 全局的Router 然后 需要传递嵌套深的组件 形成新的高阶组件 
// 就具备了两个功能1  还拥有以前的功能 第二个 拥有了withRouter 就是全局路由功能
export const Proimg = withRouter(Proimg2)